1. 认识三维模型
经过前面几大章节的学习,我们基本对 WebGL 有一定的认识了。但长期的底层知识学习,不仅让人感觉十分的枯燥乏味,也使我们与应用层渐行渐远了,学到现在甚至不知道可以用 WebGL 来做什么...
因此这一章开始,我打算暂停对底层知识的学习了,转而开始做一些小实战,通过实战的方式来接着探索不一样的 WebGL!
什么是三维模型
其实学 WebGL,做前端可视化方向,无非就是一个词:视觉效果。我们总希望通过图形,将一切数据、信息形象生动地展示在人们面前。以此我们也许会有这样一个疑问:如何绘制我们想要表达的图形呢?
到目前为止的学习中,我们绘制过三角形、简单的多边形,甚至还有立方体等图形...但我们都是通过显示地自定义数据点、表面颜色等图形数据再将其绘制出来的,因此你也许会感觉到非常地吃力。就好比我在绘制立方体的时候,我会习惯性地先建立一个三维直角坐标系,然后一个一个地描点算坐标...
在绘制一个如此简单的立方体时都要耗费大量的时间精力在非代码层面,更别说你要绘制一些复杂的图形了。于是,三维模型就出现在我们的眼前了~
对于模型的最好理解,我想应该就是看得到的实物了吧。我们可以在 free3d 等诸多 3d 模型网站中找到很多模型,而这些"模型",他们就是一个个 obj 文件。
认识 OBJ 文件
.obj
文件是Alias|Wavefront公司为3D建模和动画软件"Advanced Visualizer"开发的一种标准3D模型文件格式,大部分3D软件都支持导入、导出obj格式的模型文件。
.obj
文件简要解读:
前缀 | 描述 |
---|---|
# | 注释 |
mtllib | 引用外部 mtl 材质文件 |
o | 模型名称 |
v | 顶点坐标 (x, y, z, [w]) ,其中w 可选 |
vt | uv贴图坐标(x,y) |
vn | 法向量 |
usemtl | 使用 mtl 文件中的材质 |